<template>
	<view class="facility">
    <view class="topView">
      <topBar :list="defaultListDevice" :key="timer" @checkedEm="checkedEm"/>
      <!-- <u-tabs
        @click="getIndex"
        :list="defaultListDevice"
        lineWidth="40"
        :scrollable="isScrollable"
        :is-scroll="false"
        :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }"
        :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)'
        }"
        >
      </u-tabs> -->
    </view>
    <view class="centent">
      <view class="innerContent_two" v-if="isShowWho === 0">
        <u-search
          :showAction="true"
          actionText="搜索"
          :animation="true"
          @custom="seatchTah"
          v-model="tahSearchVal"></u-search>
        <view class="realBox_two" v-for="(item,index) in tahList" :key="index">
          <view class="firLine">
            <view class="lineEvery"></view>
            <view>
              {{ item.id }}
            </view>
            <view>
              {{ item.nickName }}
            </view>
            <view>
              {{ item.online === 1 ? '在线' : '离线' }}
            </view>
          </view>
          <view class="senBox">
            <view class="lineEvery"></view>
            <view class="deviceArg">
              <view class="imageBox">
                <image src="/static/temper.png" alt="" />
              </view>
              <view>
                {{ item.temperature }}
              </view>
            </view>
            <view class="deviceArg">
              <view class="imageBox">
                <image src="/static/humidity.png" alt="" />
              </view>
              <view>
                {{ item.humidity }}
              </view>
            </view>
            <view class="deviceArg">
              <view class="imageBox">
                <image src="/static/electric.png" alt="" />
              </view>
              <view>
                {{ item.quantity }}
              </view>
            </view>
            <view class="deviceArg">
              <view class="imageBox">
                <image src="/static/signal.png" alt="" />
              </view>
              <view>
                {{ item.dSignal}}
              </view>
            </view>
          </view>
          <view class="thrBox">
            <view class="lineEvery"></view>
            <view class="thrFlex">
              <view class="innerImage">
                <image src="/static/time.png" alt="" />
              </view>
              <view class="wordInner">
                {{ item.createTime | setTime}}
              </view>
            </view>
          </view>
          <view class="lastForSwitch">
            <view class="customButton" @click="ToDetails(0,item.id)">查看</view>
            <view class="customButton" @click="toSetDetail(item.id)">修改</view>
          </view>
        </view>
        <u-loadmore 
          :status="statusLoamoreTah" 
          @loadmore="clickLoadmoreTah" 
          fontSize="36rpx" 
          line 
          :loading-text="loadingTextTah" 
          :loadmore-text="loadmoreTextTah" 
          :nomore-text="nomoreTextTah"/>
      </view>
      
      <view class="innerContent_one" v-if="isShowWho === 1">
        <u-search
          :showAction="true"
          actionText="搜索"
          :animation="true"
          v-model="switchSearchVal"
          @custom="swarchSwith"></u-search>
        <view class="realBox_one" v-for="(item,index) in switchList" :key="index">
          <view class="deviceBox">
            <span style="font-weight: 600;">开关编号：</span>{{ item.ClientID }}
          </view>
          <view class="deviceBox">
            <span style="font-weight: 600;">创建时间：</span>{{ item.updateTime | setTime }}
          </view>
          <view class="deviceBox">
            <span style="font-weight: 600;">开关状态：</span><u-switch v-model="item.SwitchStatus" @change="changeOpenStatus(index,item.SwitchStatus,item.ClientID)" size="50" inactiveColor="rgb(230, 230, 230)"></u-switch>
          </view>
          
          <view class="lastForSwitch">
            <view class="customButton" @click="ToDetails(1,item.ClientID)">查看</view>
            <view class="customButton" @click="toSetSwitchDetail(item.ClientID)">修改</view>
          </view>
        </view>
        <u-loadmore 
          :status="statusLoamore" 
          @loadmore="clickLoadmore" 
          fontSize="36rpx" 
          line 
          :loading-text="loadingText" 
          :loadmore-text="loadmoreText" 
          :nomore-text="nomoreText"/>
      </view>
    <u-action-sheet
      :show="showGateWay"
      :actions="gatewayArr"
      title="请选择网关"
      @close="showGateWay = false"
      @select="gatewaySelect"
    >
    </u-action-sheet>
    </view>
	</view>
</template>

<script>
  import request from '@/request/api';
  import { timestampToDatetime } from '@/untils/index';
  import topBar from '@/components/test/topBar';
	export default {
    components:{
      topBar
    },
		data() {
			return {
        gatewayArr: [], //
        showGateWay: false,
        tahSearchVal:'', // 搜索 温湿度
        switchSearchVal: '', // 开关
        timer: new Date().getTime(),
        statusLoamore:'loadmore',
        loadingText: '加载中...',
        loadmoreText: '加载更多',
        nomoreText: '已加载完',
        statusLoamoreTah:'loadmore',
        loadingTextTah: '加载中...',
        loadmoreTextTah: '加载更多',
        nomoreTextTah: '已加载完',
        value: false,
        tahList:[],
        switchList: [],
        defaultListDevice: [  // mock device
          {
            name: '温湿度列表',
            isChecked: true
          },
          {
            name: '开关列表',
            isChecked: false
          }
        ],
        isShowWho: 0,
        pagetionForSwitch:{
          page:1,
          limit: 5,
          total: 1
        },
        pagetionForTah:{
          page: 1,
          limit: 5,
          total: 1
        },
        recordNum: '',
			}
		},
    filters: {
      setTime(val){
        return timestampToDatetime(val)
      }
		},
		onLoad() {
      // this.getTahList()
		},
    onShow(){
      uni.pageScrollTo({
        scrollTop: 0
      })
    },
    computed: {},
    onHide(){
      this.pagetionForTah = { page: 1, limit: 5, total: 1 }
      this.pagetionForSwitch = { page: 1, limit: 5, total: 1 }
    },
		methods: {
      // 修改详情
      toSetDetail(e){
        uni.navigateTo({
          url:`./../setDevice/setSwitch?id=${e}`
        })
      },
      gatewaySelect(e){
        // console.log(e);
        let updateSwitchObj = {
          url: '/switchDevice/update',
          method: 'POST',
          data: {
            gatewayId: e.id,
            num: this.recordNum
          }
        }
        request(updateSwitchObj).then(res => {
          if (res.code === '200') {
            uni.$u.toast(res.message)
            this.showGateWay = false
          } else {
            uni.$u.toast(res.message)
          }
        })
      },
      toSetSwitchDetail(val){
        this.recordNum = val
        this.showGateWay = true
        this.getGetwayListAllin()
      },
      // 获取网关列表
      getGetwayListAllin(){
        const getwayObj = {
          url: '/switchGateway/allList',
          method: 'GET',
        }
        request(getwayObj).then(res => {
          if(res.code === '200') {
            // console.log(res);
            this.gatewayArr = res.data
          } else {
            uni.$u.toast(res.message)
          }
        })
      },
      clickLoadmoreTah(){
        if ((this.pagetionForTah.page * this.pagetionForTah.limit) >= this.pagetionForTah.total ) {
          this.statusLoamoreTah = 'nomore'
          return 
        } else {
          setTimeout(() => {
            this.statusLoamoreTah = 'loading';
            this.pagetionForTah.page++
            this.getSwitchList()
          }, 500);
        }
      },
      // loadmore 加载更多
      clickLoadmore(){
        if ((this.pagetionForSwitch.page * this.pagetionForSwitch.limit) >= this.pagetionForSwitch.total ) {
          this.statusLoamore = 'nomore'
          return 
        } else {
          setTimeout(() => {
            this.statusLoamore = 'loading';
            this.pagetionForSwitch.page++
            this.getSwitchList()
          }, 500);
        }
      },
      onReachBottom() {
        if (this.defaultListDevice.name === '温湿度列表') {
          if ((this.pagetionForTah.page * this.pagetionForTah.limit) >= this.pagetionForTah.total ) {
            this.statusLoamoreTah = 'nomore'
            return 
          } else {
            setTimeout(() => {
              this.statusLoamoreTah = 'loading';
              this.pagetionForTah.page++
              this.getTahList()
            }, 500);
          }
        } else {
          if ((this.pagetionForSwitch.page * this.pagetionForSwitch.limit) >= this.pagetionForSwitch.total ) {
            this.statusLoamore = 'nomore'
            return 
          } else {
            setTimeout(() => {
              this.statusLoamore = 'loading';
              this.pagetionForSwitch.page++
              this.getSwitchList()
            }, 500);
          }
        }
      },
      // 搜索开关
      swarchSwith(kw){
        this.pagetionForSwitch.page = 1
        this.switchList = []
        this.getSwitchList(kw)
      },
      // 搜索温湿度列表
      seatchTah(kw){
        this.pagetionForSwitch.page = 1
        this.tahList = [] 
        this.getTahList(kw)
      },
      getTahList(kw){
        // console.log(kw);
        if (kw === undefined) {
          kw = ''
        }
        
        let options = {
          url: '/mobile/tah/list',
          method: 'GET',
          data: {
            limit: 5,
            page: this.pagetionForTah.page,
            kw
          }
        }
        request(options).then((res) => {
          this.tahList = res.data.records
          this.pagetionForTah.total = res.data.total
          if (this.pagetionForTah.total >= res.data.total) {
            this.statusLoamoreTah = 'nomore'
          }
        })
      },
      getSwitchList(kw){
        if (kw === undefined) {
          kw = ''
        }
        let options = {
          url: '/mobile/switch/list',
          method: 'GET',
          data: {
            limit: 5,
            page: this.pagetionForSwitch.page,
            kw
          }
        }
        request(options).then((res) => {
          let listInner = res.data.records
          this.pagetionForSwitch.total = res.data.total
          for (const item in listInner) {
            listInner[item].SwitchStatus === 0 ? listInner[item].SwitchStatus = false : listInner[item].SwitchStatus = true
          }
          this.switchList.push(...res.data.records)
          // console.log(this.switchList);
        })
      },
      changeOpenStatus(index,status,id) {
        // console.log(status);
        let options = {
          url: '/mobile/switch/update',
          method: 'GET',
          data: {
            deviceId: id,
            status: status ? 1 : 2
          }
        }
        request(options).then(res => {})
      },
      tofacility (){
        uni.navigateTo({
          url:'./facilityDetail'
        })
      },
      checkedEm (item){
        let arr = this.defaultListDevice
        arr.forEach(el => {
          if (el.isChecked === true) {
            el.isChecked = false
          }
        });
        this.defaultListDevice = arr
        this.defaultListDevice[item].isChecked = true
        this.timer = new Date().getTime() + Math.floor(Math.random() * 10) + 1;
        this.isShowWho = item
        if (this.isShowWho === 0) {
          this.getTahList()
        } else {
          this.getSwitchList()
        }
      },
      ToDetails(val,id){
        uni.navigateTo({
          url:`./facilityDetail?id=${id}&tag=${val}`
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
.lastForSwitch {
  margin: 30rpx 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  .customButton {
    width: 40%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 10rpx;
    color: #fff;
  }
  :nth-child(1) {
    background-color: #3c9cff;
  }
  :nth-child(2) {
    background-color: #d4237a;
  }
}
.facility {
  width: 100%;
  height: auto;
}
.topView {
  width: 100%;
  height: 100rpx;
}
.centent {
  height: auto;
  width: 100%;
  margin-top: 15rpx;
}
.innerContent_two {
  margin: 0 3%;
  width: 94%;
  height: auto;
}
.innerContent_one {
  margin: 0 3%;
  width: 94%;
  height: auto;
}
.realBox_two {
  width: 95%;
  height: auto;
  border: 1rpx solid #000;
  margin: 15rpx auto;
}
.realBox_one {
  width: 95%;
  height: auto;
  border: 1rpx solid #000;
  margin: 15rpx auto;
}
.firLine {
  width: 94%;
  margin: 10rpx 3%;
  padding: 20rpx 0;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.lineEvery {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1rpx;
  background-color: #000;
}
.senBox {
  width: 94%;
  margin: 10rpx 3%;
  padding: 20rpx 0;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.senBox .deviceArg {
  width: 60rpx;
  text-align: center;
}
.imageBox {
  width: 100%;
  height: 45rpx;
}
.imageBox image {
  width: 70%;
  height: 100%;
  margin-left: 15%;
}
.thrBox {
  position: relative;
  width: 94%;
  margin: 10rpx 3%;
  padding: 20rpx 0;
}
.thrFlex {
  display: flex;
  width: 94%;
  height: auto;
  margin: 10rpx 3%;
  line-height: 35rpx;
}
.innerImage {
  width: 35rpx;
  height: 35rpx;
  line-height: 35rpx;
}
.innerImage image {
  width: 100%;
  height: 100%;
}
.wordInner {
  width: calc(100% - 65rpx);
  margin-left: 30rpx;
  word-wrap: break-word;
}

// 开关
.deviceBox {
  width: 94%;
  margin: 10rpx 3%;
  padding: 20rpx 0;
  height: 50rpx;
  line-height: 50rpx;
  display: flex;
}
</style>
